<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" default-page-size='18' :show-loading-more-no-more-view	= "false" :show-default-loading-more-text="step == 1">
		<template #top>
			<cl-navbar :title="$t('group.group_create.title')" leftIconSize="40rpx" placeholder :autoBack="step == 1">
				<template slot="left" v-if="step == 2">
					<text style="font-size: 28rpx;" @click="clickStep(1)">{{$t("group.common.lastStep")}}</text>
				</template>
				<template slot="right">
					<text style="font-size: 28rpx;" v-if="step == 1" @click="clickStep(2)">{{$t("group.common.next")}}</text>
					<text style="font-size: 28rpx;" v-if="step == 2" @click="complete">{{$t("group.common.complete")}}</text>
				</template>
			</cl-navbar>
			<view class="searchview" v-if="step == 1">
				<u-search height="64rpx" :showAction="false" :clearabled="false" bgColor="#1e1f30" :inputStyle="{fontSize:'24rpx'}" :placeholder="$t('commonality.search')" @input="searchInput"></u-search>
			</view>
			<view>
				<cl-edit-pop ref="clEditPop" :title="$t('group.common.name')" @complete="setname">
					<view style="padding:30rpx;">
						<u-input
							focus
							:adjustPosition="false"
							:customStyle="{backgroundColor:'#1E1F30',height:'110rpx',padding:'0 30rpx',borderRadius: '20rpx'}"
							fontSize="28rpx"
							v-model="groupname"
							color="#ffffff"
						    border="none"
						  ></u-input>
					</view>
				</cl-edit-pop>
			</view>
		</template>
		<template v-if="step == 1">
			<view :key="item.friend_idx" v-for="(item,index) in dataList">
				<view class="listitem" @click="itemclick(item.friend_idx)">
					<view class="listitem__left">
						<image src="/static/icon/select.png" mode="" style="width: 36rpx;height: 36rpx;" v-if="addData.members.includes(item.friend_idx)"></image>
						<image src="/static/icon/no-select.png" mode="" style="width: 36rpx;height: 36rpx;" v-else></image>
					</view>
					<view class="listitem__right">
						<cl-avatar :src="item.avatar_url" size="80rpx"></cl-avatar>
						<text class="listitem__right__nickname">{{item.friend_remark || item.nick_name}}</text>
					</view>
				</view>
			</view>
		</template>	
			
		<template v-if="step == 2">
			<view class="cellviewGrop" @click="settingInfo('avatar_url')">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t("group.common.image")}}</text>
					</view>
					<view class="cellview__right">
						<cl-avatar :src="addData.avatar_url" size="100rpx"></cl-avatar>
						<u-icon name="arrow-right" color="#ffffff"></u-icon>
					</view>
				</view>
			</view>
			<view class="cellviewGrop" @click="settingInfo('group_name')">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t("group.common.name")}}</text>
					</view>
					<view class="cellview__right">
						<text class="cellview__right__content">{{addData.group_name}}</text>
						<u-icon name="arrow-right" color="#ffffff"></u-icon>
					</view>
				</view>
			</view>
		</template>
	</z-paging>
</template>

<script>
	import sqliteFriend from '@/sqlite_services/friend.js'
	import {
		mapState
	} from 'vuex'
	import upload from '@/common/upload/upload.js'
	export default {
		data() {
			return {
				step:1,
				groupname:'',
				addData:{
					avatar_url:'',
					group_name:'',
					members:[]
				},
				searchval:'',
				dataList:[]
			};
		},
		computed: {
			...mapState({
				friendList: state => state.friends.friendList,
			}),
		},
		onLoad() {
		},
		methods: {
			searchInput(e){
				uni.$u.debounce(()=>{
					this.searchval = e
					this.$refs.paging.reload()
				}, 500,false)
			},
			queryList(){
				let newdata = this.friendList.filter(item => {
					// 根据名字筛选
					if (this.searchval && item.friend_remark.indexOf(this.searchval) === -1 && item.nick_name.indexOf(this.searchval) === -1) {
						return false;
					}
					return true;
				});
				this.$refs.paging.setLocalPaging(newdata);
			},
			clickStep(step){
				if(step == 2 && this.addData.members.length < 2){
					uni.showToast({
						title:this.$t("group.common.selectTwoFriends"),
						icon:'none'
					})
					return
				}
				this.step = step
			},
			itemclick(id){
				if (this.addData.members.includes(id)) {
					// 如果数组中包含特定值，则删除该值
					const index = this.addData.members.indexOf(id);
					this.addData.members.splice(index, 1);
				} else {
					// 如果数组中不包含特定值，则添加该值
					this.addData.members.push(id);
				}
			},
			settingInfo(type){
				switch (type){
					case 'avatar_url':
						uni.chooseImage({
							count:1,
							sourceType:['album'],
							crop: { //是否进行裁剪，此配置一般用于头像上传时裁剪成正方形等
								width: 500,
								height: 500
							},
							success: async(res) => {
							   let loadSrc = res.tempFilePaths[0];
							   try {
									let res = await upload.uploadFile(loadSrc, 'avatar', 'image')
									this.addData.avatar_url = res.url
							   } catch (e) {
							   }
							}
						})
						break;
					case 'group_name':
						this.$nextTick(()=>{
							this.groupname = this.addData.group_name
							this.$refs.clEditPop.show()
						})
						break;
					default:
						break;
				}
			},
			setname(){
				this.addData.group_name = this.groupname
				this.$refs.clEditPop.cancel()
			},
			//点击完成
			async complete(){
				if(!this.addData.avatar_url){
					uni.showToast({
						title:this.$t("group.common.pleaseUploadImage"),
						icon:'none'
					})
					return
				}
				if(!this.addData.group_name){
					uni.showToast({
						title:this.$t("group.common.pleaseSetName"),
						icon:'none'
					})
					return
				}
				let resapi = await this.$api.groups.create({
					avatar_url:this.addData.avatar_url,
					group_name:this.addData.group_name,
					members:this.addData.members
				})
				if(resapi){
					this.$Router.replace({
						name: 'chatGroupMsg',
						params: {
							group_id:resapi.data.group_id,
							group_name:resapi.data.group_name,
							avatar_url:resapi.data.avatar_url,
						}
					});
					
					console.log(resapi);
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.searchview {
		margin: 20rpx 30rpx;
		background-color: #1e1f30;
		border-radius: 60rpx;
		padding-right: 20rpx;
	}
	.listitem {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
		&__left{
			display: flex;
			align-items: center;
		}
		&__right {
			margin-left: 20rpx;
			flex: 1;
			display: flex;
			align-items: center;
			&__nickname {
				margin-left: 20rpx;
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
	.cellviewGrop {
		background: #1E1F30;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 0;
	
		.cellview {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 30rpx;
			min-height: 110rpx;
			box-sizing: border-box;
	
			&__left {
				display: flex;
				align-items: center;
	
	
				&__title {
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
			&__right{
				display: flex;
				align-items: center;
				&__content{
					font-size: 28rpx;
					color: #61626e;
				}
			}
		}
	}
</style>